<template>
	<view class="xx">
		<view class="search-container">
			<!-- 搜索框 -->
			<view class="search-box">
				<!-- 搜索图标 -->
				<image class="search-icon" src="/static/sousou.png" mode="aspectFit"></image>
				<!-- 输入框 -->
				<input class="search-input" placeholder="请输入搜索内容" placeholder-class="placeholder-style" />
			</view>
			<!-- <div>------- {{ allGoodsCount }} ------</div> -->

			<view class="content">
				<view class="left">
					<view :class="{ selected: currentCategory == index }" @click="handleCategoryClick(index)"
						class="item" v-for="(item, index) in cateList" :key="item.id">
						{{ item.certname }}
					</view>
				</view>

				<!-- 右侧商品列表 -->
				<scroll-view class="right-list" scroll-y :scroll-with-animation="true"
					:scroll-into-view="scrollIntoViewId" @scroll="handleRightScroll">
					<view class="goods-cate-item" :ref="`category-${index}`" :id="`category-${index}`"
						v-for="(ele, index) in cateList" :key="ele.id">

						<view class="title">
							{{ ele.certname }}
						</view>

						<view class="goods-list">
							<view class="goods-item" v-for="i in ele.goodsNum" :key="i">
								<image src="/static/bao.png" mode="scaleToFill" class="goods-img"></image>
								<view class="info">
									<view>
										<view>轻奢手提包</view>
										<view>￥365.00</view>
									</view>
									<image src="/static/gouwuche.png" mode="aspectFit" class="gouwu-img"></image>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="footer">
				<view class="cart">
					<text class="num">20</text>
					<image src="/static/gouwuche.png" mode="aspectFit" class="gouwu-img"></image>
				</view>
				<view class="info">
					实付款 <text class="red-f">￥365.00</text>
				</view>
				<view class="submit">
					<button class="btn" @click="showDrawer()">提交订单</button>
				</view>
			</view>
		</view>

		<view class="drawer" :style=" {height: isDrawShow?'100vh':'0'} " @click="isDrawShow=false">
			<view class="body" @click.stop="isDrawShow=true">
				<view class="goods">
					<image class="img" src="/static/hbao.png" mode=""></image>
					<view class="info">
						<view class="money">￥365.00</view>
						<view class="kucun">库存:120</view>
					</view>
				</view>
				<view class="title">
					型号：
				</view>
				<view class="xinghao">
					<view class="xing" :class="{selectxing:selectxinghao == i}" @click="selectxinghao =i"
						v-for="(item,i) in xinghaos" :key="item.id">{{item.value}}</view>
				</view>

				<view class="buycount">
					<text>购买数量</text>
					<view class="count">
						<text class="plus" @click="gnum++">+</text>
						<text class="num">{{gnum}}</text>
						<text class="sub" @click=" gnum>1 && gnum--">-</text>
					</view>
				</view>
				<view class="btn-ok">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			allGoodsCount() {
				let n = 0
				this.cateList.forEach(ele => {
					n += ele.goodsNum
				})
				return n
			}
		},
		data() {
			return {
				gnum: 12,
				selectxinghao: 0,
				xinghaos: [{
						id: 1,
						value: 'G00601'
					},
					{
						id: 2,
						value: 'G00602'
					},
					{
						id: 3,
						value: 'G00603'
					},
					{
						id: 4,
						value: 'G00604'
					},
					{
						id: 5,
						value: 'G00605'
					},
					{
						id: 6,
						value: 'G00606'
					},
					{
						id: 7,
						value: 'G00607'
					},
					{
						id: 8,
						value: 'G00608'
					},
				],
				cateList: [{
						"certname": "全部分类",
						"id": 1,
						goodsNum: Math.floor(Math.random() * 15) + 5
					},
					{
						"certname": "精致腕表",
						"id": 2,
						goodsNum: Math.floor(Math.random() * 15) + 5
					},
					{
						"certname": "定制皮带",
						"id": 3,
						goodsNum: Math.floor(Math.random() * 15) + 5
					},
					{
						"certname": "轻奢包",
						"id": 4,
						goodsNum: Math.floor(Math.random() * 15) + 5
					}, {
						"certname": "稀有皮具",
						"id": 5,
						goodsNum: Math.floor(Math.random() * 15) + 5
					},
					{
						"certname": "男士包包",
						"id": 6,
						goodsNum: Math.floor(Math.random() * 15) + 5
					},
					{
						"certname": "网红款",
						"id": 7,
						goodsNum: Math.floor(Math.random() * 15) + 5
					},
					{
						"certname": "女神款",
						"id": 8,
						goodsNum: Math.floor(Math.random() * 15) + 5
					},
					{
						"certname": "少女款",
						"id": 9,
						goodsNum: Math.floor(Math.random() * 15) + 5
					}, {
						"certname": "时尚款",
						"id": 10,
						goodsNum: Math.floor(Math.random() * 15) + 5
					},
				],

				currentCategory: 0, // 当前选中的分类索引
				scrollIntoViewId: 'category-0', // 右侧滚动到的分类 ID
				isDrawShow: false
			};
		},
		methods: {
			showDrawer() {
				this.isDrawShow = true
			},
			closeDrawer() {
				this.isDrawShow = false
			},
			change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
			},
			handleCategoryClick(index) {
				this.currentCategory = index;
				this.scrollIntoViewId = `category-${index}`;
			},
			handleRightScroll(event) {
				const scrollTop = event.detail.scrollTop;
				let currentIndex = 0;

				this.cateList.forEach((item, index) => {
					const element = uni.createSelectorQuery().select(`#category-${index}`);
					element.boundingClientRect((rect) => {
						if (rect.top <= 400 && rect.bottom > 0) {
							currentIndex = index;
						}
					}).exec()
				});

				if (currentIndex !== this.currentCategory) {
					this.currentCategory = currentIndex;
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 搜索框容器 */
	.search-container {
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
		height: 100vh;
	}

	/* 搜索框样式 */
	.search-box {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
		margin: 20rpx 40rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	/* 搜索图标样式 */
	.search-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	/* 输入框样式 */
	.search-input {
		flex: 1;
		font-size: 32rpx;
		color: #333;
	}

	/* 占位符样式 */
	.placeholder-style {
		color: #999;
		font-size: 28rpx;
	}

	.content {
		display: flex;
		justify-content: space-between;
		height: calc(100% - 340rpx);

		.left {
			box-sizing: border-box;
			width: 240rpx;
			background-color: #eeeeee;

			.item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 80rpx;
				width: 100%;
				border-bottom: 2rpx solid #bbb;
			}

			.selected {
				background-color: #fff;
				border-left: 10rpx solid crimson;
			}
		}

		.right-list {
			flex: 1;
			background-color: #fff;
			overflow: auto;

			.goods-list {
				flex-wrap: wrap;
				display: flex;
				justify-content: flex-start;

				.goods-item {
					width: calc(50% - 60rpx);
					box-sizing: border-box;
					margin: 30rpx;
					background-color: #fff;
					box-shadow: 4rpx 4rpx 4rpx 4rpx rgba(0, 0, 0, 0.2);

					.goods-img {
						width: 100%;
						height: 174rpx;
					}

					.info {
						display: flex;
						padding: 0 20rpx;
						justify-content: space-between;
						align-items: flex-end;
						padding-bottom: 20rpx;
						height: 60rpx;
						font-size: 20rpx;
						color: #999;

						.gouwu-img {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}

	.footer {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 80rpx;
		height: 128rpx;
		box-shadow: 4rpx -6rpx 4rpx 4rpx rgba(0, 0, 0, 0.1);

		.cart {
			position: relative;
		}

		.num {
			position: absolute;
			right: 0;
			top: 0;
			width: 60rpx;
			height: 60rpx;
			background-color: #f61212;
			color: #eee;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			font-size: 36rpx;
			transform: translate(50%, -50%);
		}

		.info {
			margin-left: 80rpx;
			flex: 1;

			.red-f {
				color: #f61212;
			}
		}

		.gouwu-img {
			width: 90rpx;
			height: 90rpx;
		}

		.submit {
			.btn {
				color: #fff;
				background-color: #f61212;
			}
		}
	}

	.drawer {
		position: absolute;
		bottom: 0;
		left: 0;
		overflow: hidden;
		z-index: 100;
		width: 100vh;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.3);
		transition: all .2s;

		.body {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100vw;
			height: 1600rpx;
			background-color: #fff;

			.goods {
				display: flex;
				align-items: center;
				margin-top: 100rpx;
				padding: 0 100rpx;

				.img {
					width: 360rpx;
					height: 360rpx;
				}

				.info {
					margin-left: 60rpx;

					.money {
						font-size: 68rpx;
						color: #f61212;
						margin-bottom: 40rpx;
					}

					.kucun {
						color: #999;
						font-size: 44rpx;
					}
				}
			}

			.title {
				margin: 40rpx 80rpx 0;
				font-size: 60rpx;
			}

			.xinghao {
				display: flex;
				flex-wrap: wrap;
				margin: 0 60rpx;
				justify-content: space-around;
				font-size: 48rpx;

				.xing {
					padding: 20rpx 40rpx;
					background-color: #bbb;
					margin: 40rpx;
				}

				.selectxing {
					color: #fff;
					background-color: #f61212;
				}
			}

			.buycount {
				padding: 80rpx 120rpx;
				display: flex;
				justify-content: space-between;

				.count {
					display: flex;
					width: 480rpx;
					align-items: center;
				}

				.plus,
				.sub {
					padding: 40rpx;
					background-color: #eee;
					width: 40rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.num {
					margin: 0 40rpx;
				}
			}

			.btn-ok {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #f61212;
				margin: 40rpx 80rpx;
				height: 128rpx;
				border-radius: 64rpx;
				color: #eee;
			}
		}
	}
</style>